<!doctype html>
<html class="no-js" lang="zxx" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>房屋信息</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="http://localhost:8080/assets/img/favicon.ico">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://localhost:8080/assets/js/main.js"></script>

    <!-- CSS here -->
    <link rel="stylesheet" href="http://localhost:8080/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/slicknav.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/animate.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/magnific-popup.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/jquery-ui.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/themify-icons.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/slick.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/nice-select.css">
    <link rel="stylesheet" href="http://localhost:8080/assets/css/style.css">
</head>
<body>
<div th:replace="template.html::header"></div>
<main>
    <!-- Hero Area Start-->
    <div class="slider-area gray-bg position-relative"
         style="background-image: url('http://localhost:8080/assets/img/banner.jpg')">
        <div class="single-slider d-flex align-items-center slider-height2">
            <div class="container">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="hero-caption hero-caption2">
                            <h2 style="color: whitesmoke">浏览房屋</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero Area End -->

    <!-- job_listing_area_start  -->
    <div class="job_listing_area section-bg2 " style="padding-top: 30px">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="job_filter white-bg">
                        <div class="form_inner white-bg">
                            <form action="houses" method="post">
                                <div class="row">
                                    <div style="margin-left: auto;margin-right: 30px;display: flex"
                                         class="single_field">
                                        <input type="number" min="1" placeholder="价格范围(最低价格)" name="price_min"
                                               style="margin-right: 30px;">
                                        <input type="number" min="1" placeholder="价格范围(最高价格)" name="price_max"
                                               style="margin-right: 30px;">
                                        <input type="text" placeholder="房型" name="keyword" style="margin-right: 30px;">
                                        <input type="text" placeholder="地点" name="location" style="margin-right: 30px;">
                                        <input type="submit" value="搜索" class="boxed-btn3">
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="job_lists m-0">
                        <div class="recent_joblist_wrap">
                            <div class="recent_joblist white-bg " style="margin-top: 20px;margin-bottom: 0">
                                <div class="row align-items-center">
                                    <div class="col-md-6">
                                        <h4>房屋列表</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="list">
                            <div class="col-lg-12 col-md-12"
                                 th:each="house : ${houses}">
                                <label style="display: none">
                                    <input type="text" name="house-id" th:value="${house.getId()}">
                                </label>
                                <div class="single_jobs white-bg d-flex justify-content-between">
                                    <div class="jobs_left d-flex align-items-center">
                                        <div class="thumbx">
                                            <a th:href="'rent-house?id=' + ${house.getId()}">
                                                <img th:src="${house.getPic()}" alt="">
                                            </a>
                                        </div>
                                        <div class="jobs_conetent">
                                            <a th:href="'rent-house?id=' + ${house.getId()}">
                                                <h4 th:text="${house.getName()}"></h4>
                                            </a>
                                            <div class="links_locat d-flex align-items-center">
                                                <div class="location">
                                                    <p>
                                                        位置：
                                                        <a th:text="${house.getLocation()}"></a>
                                                    </p>
                                                </div>
                                                <div class="location">
                                                    <p>
                                                        面积：
                                                        <a th:text="${house.getArea()} + 'm²'"></a>
                                                    </p>
                                                </div>
                                                <div class="location">
                                                    <p>
                                                        <a th:text="${house.getRoom()}"></a>
                                                    </p>
                                                </div>
                                                <div class="location">
                                                    <p>
                                                        <a style="color: red"
                                                           th:text="${house.getPrice()} +元+'/'+月"></a>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="jobs_right">
                                        <div class="apply_now">
                                            <a th:if="${!isAdmin && house.getIsRent()}" class="heart_mark"
                                               style="background: white;">
                                                <i class="far fa"><?xml version="1.0" encoding="UTF-8"?>
                                                    <svg width="24" height="24"
                                                         viewBox="0 0 48 48" fill="none"
                                                         xmlns="http://www.w3.org/2000/svg">
                                                        <rect width="48" height="48" fill="white" fill-opacity="0.01"/>
                                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                                              d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
                                                              fill="none" stroke="#d0021b" stroke-width="4"
                                                              stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M15 15L33 33" stroke="#d0021b" stroke-width="4"
                                                              stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>
                                                </i></a>
                                            <a th:if="${!isAdmin && !house.getIsRent()}"
                                               th:href="'rent-house?id=' + ${house.getId()}"
                                               class="boxed-btn3">
                                                租用
                                            </a>
                                            <a th:if="${isAdmin}"
                                               th:onclick="'deleteHouse(' + ${house.getId()} + ')'"
                                               class="boxed-btn3x">
                                                删除
                                            </a>
                                        </div>
                                        <div class="date" th:if="${orders.get(houseStat.index)!=null}">
                                            <p th:text="出租时间+': ' + ${orders.get(houseStat.index).parseBTime()}"></p>
                                            <p th:text="截止时间+': ' + ${orders.get(houseStat.index).parseETime()}"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="job_filter white-bg">
                        <div class="form_inner white-bg">
                            <div class="row">
                                <div style="display: flex;margin: auto;" class="single_field">
                                    <input onclick="add(-1)" class="boxed-btn3" style="margin-right: 20px" value="上一页">
                                    <input onchange="change(this.value)" id="pager" type="number" value="1" min="1"
                                           disabled>
                                    <input onclick="add(1)" class="boxed-btn3" style="margin-left: 20px" value="下一页">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- job_listing_area_end  -->
</main>
<div th:replace="template.html::footer"></div>
<!-- Scroll Up -->
<div id="back-top">
    <a title="Go to Top" href="#"> <i class="fas fa-level-up-alt"></i></a>
</div>

<script>
    function deleteHouse(id) {
        $.ajax({
            url: 'delete-house',
            type: 'post',
            data: {'house-id': id},
            success: function () {
                window.location = 'house'
            }
        })
    }
</script>
</body>
</html>